<template>
  <div ref="gantt" style="height:600px;"></div>
</template>

<script>
  import { gantt } from 'dhtmlx-gantt'
  import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
  import '../advancedForm/locale_cn'
  export default {
    name: 'Gantt',
    props: {
      tasks: {
        type: Object,
        default () {
          return { data: [], links: [] }
        }
      }
    },

    mounted: function () {

      gantt.config.subscales = [
        {
          unit: 'year',
          step: 1,
          date: '%Y'
        }
      ]
      gantt.config.xml_date = '%Y-%m-%d'
      gantt.config.undo = true;
      gantt.config.redo = true;
      gantt.init(this.$refs.gantt)
      gantt.parse(this.$props.tasks)

      gantt.createDataProcessor((entity, action, data, id) => {
        console.log("显示数据",entity,action, data, id)
        this.$emit(`${entity}-updated`, id, action, data)
      })
      gantt.attachEvent('onTaskSelected', (id) => {
        const task = gantt.getTask(id)
        console.log("当前id",id)
        this.$emit('task-selected', task)
      })

      gantt.attachEvent('onTaskIdChange', (id, new_id) => {
        if (gantt.getSelectedId() == new_id) {
          const task = gantt.getTask(new_id)
          console.log("attachEvent",id , new_id)
          this.$emit('task-selected', task)
        }
      })
      gantt.config.undo_actions = {
        update:"update",
        remove:"remove", // remove an item TitleName datastore
        add:"add"
      };
      gantt.config.undo_types = {
        link:"link",
        task:"task"
      };
    }
  }
</script>

<style scoped>
  @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>
